<template>
  <div class="question">
    <!--全国城市 -->
    <van-dropdown-menu>
      <van-dropdown-item v-model="value" title="全国数据" ref="item">
        <!-- 标题 -->
        <template #title>
          <h3>
            面试宝典
            <span class="city">{{ value }}</span>
          </h3>
        </template>
        <!-- 点击展开的城市列表 -->
        <template #default>
          <van-index-bar>
            <div v-for="(item, index) in cityList" :key="index">
              <van-index-anchor :index="index"></van-index-anchor>
              <van-cell
                v-for="(citem, cindex) in item"
                :key="cindex"
                @click="cityCheck(citem)"
                >{{ citem }}</van-cell
              >
            </div>
          </van-index-bar>
        </template>
      </van-dropdown-item>
    </van-dropdown-menu>
    <!-- 城市对应的it行业名称 -->
    <van-tabs v-model="active" scrollspy sticky line-height="0px">
      <van-tab v-for="(item, index) in itList" :key="index" :title="item.name">
      </van-tab>
    </van-tabs>
    <!-- 四大天王一大护法 -->
    <div class="questionBank">
      <!-- 顺序刷题 -->
      <div class="bigques">
        <van-circle
          v-model="section"
          :rate="30"
          :speed="126"
          size="120px"
          layer-color="transparent"
          :stroke-width="60"
        >
          <template #default>
            <div class="biaoti">
              <h3 class="hfz">顺序刷题</h3>
              <h4 class="hfz">{{ section }}/{{ totalCount }}</h4>
            </div>
          </template>
        </van-circle>
      </div>
      <!-- 常错题库 -->
      <div class="mistake public">
        <div class="mistakeicon divicon">
          <span class="iconfont">&#xe64f;</span>
        </div>
        <p class="pfz">常错题库</p>
      </div>
      <!-- 收藏题库 -->
      <div class="collect public">
        <div class="collecticon divicon">
          <span class="iconfont">&#xe654;</span>
        </div>
        <p class="pfz">收藏题库</p>
      </div>
      <!-- 企业题库 -->
      <div class="company public">
        <div class="companyicon divicon" @click="$router.push('/company')">
          <span class="iconfont">&#xe648;</span>
        </div>
        <p class="pfz">企业题库</p>
      </div>
      <!-- 已答题库 -->
      <div class="answer public">
        <div class="answericon divicon">
          <span class="iconfont">&#xe648;</span>
        </div>
        <p class="pfz">企业题库</p>
      </div>
    </div>
    <div class="addtotal">
      <h4>累计收录</h4>
      <p>126</p>
    </div>
    <div class="simulation">
      <van-button type="warning" size="large" @click="simulation"
        >模拟面试</van-button
      >
    </div>
  </div>
</template>

<script>
// 导入api
import { interFilters } from '@/api/api.js'
export default {
  data () {
    return {
      value: '全国',
      // 储存城市信息
      cityList: {},
      // 城市对应的it职业
      cityit: {},
      // 储存城市对应的it行业
      itList: [],
      // 标签栏对应的下表1
      active: 0,
      // 控制标签栏的背景色
      iscolor: false,
      // s刷题总数
      totalCount: 126,
      // 已经刷过的题
      section: 0
    }
  },

  methods: {
    // 城市的点击事件
    cityCheck (value) {
      // 获取到被点击的城市
      this.value = value
      // 一旦点击就隐藏
      this.$refs.item.toggle()
      // 然后筛选对应的it行业
      console.log(this.cityit)
      this.itList = this.cityit[this.value]
    },
    // 点击跳转
    simulation () {
      console.log(this.value)
      // 传参过去到模拟考试页面
      this.$router.push(
        `/interview/${JSON.stringify(this.itList[this.active])}`
      )
    }
  },
  async created () {
    // 获取城市信息
    const res = await interFilters()
    console.log(res)
    // 储存城市信息
    this.cityList = res.data.citys
    // 获取返回的刷题总数
    this.totalCount = res.data.totalCount
    // 城市对应的it行业
    this.cityit = res.data.cityPositions
    // 获取的所有城市对应的it行业名称后立即进行一次筛选
    this.itList = this.cityit[this.value]
    console.log(this.itList)
  }
}
</script>

<style lang="less" scoped>
.question {
  .city {
    font-size: 14px;
    font-weight: 400;
  }
  /deep/ .van-index-anchor {
    background-color: #ccc;
  }

  /deep/ .van-tab {
    box-sizing: content-box;
    margin: 4px 8px;
    border-radius: 20px;
    background-color: #f7f4f5;
  }
  /deep/ .van-tab--active {
    color: #fff;
    background-color: #00b8d4;
  }
  .questionBank {
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    position: relative;
    width: 100%;
    height: 240px;
    margin-top: 20px;
    margin-bottom: 20px;
    .hfz {
      font-size: 20px;
      color: #fff;
      margin: 0;
    }
    .public {
      text-align: center;
      position: absolute;
      width: 60px;
      height: 60px;
      .pfz {
        font-size: 12px;
      }
      .iconfont {
        font-size: 25px;
        color: #fff;
      }
      .divicon {
        border-radius: 30px;
        margin: 0 auto;
        width: 60px;
        height: 60px;
        line-height: 60px;
        text-align: center;
      }
    }
    // 四个盒子的定位
    .bigques {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -60px;
      margin-left: -60px;
      border-radius: 60%;
      background-image: url('./circleBg.png');
      background-color: #f13865;
      background-size: cover;

      .biaoti {
        margin-top: 40px;
      }
    }
    .mistake {
      top: 10px;
      left: 30px;
      .mistakeicon {
        background-color: #ff6565;
      }
    }
    .collect {
      top: 10px;
      right: 30px;
      .collecticon {
        background-color: #ffc309;
      }
    }
    .company {
      bottom: 40px;
      left: 30px;
      padding-top: 20px;
      .companyicon {
        background-color: #00d3e6;
      }
    }
    .answer {
      bottom: 40px;
      right: 30px;
      padding-top: 20px;
      .answericon {
        background-color: #23cc82;
      }
    }
  }
  .addtotal {
    h4,
    p {
      margin: 0;
      padding: 0;
      margin: 20px;
    }

    text-align: center;
  }
  .simulation {
    padding: 0 20px;
    border-radius: 5px;
  }
}
</style>
